<template>
  <section>
  	<div class="model arrange">
  		<div class="pink">审批申请</div>
  		<div class="kong"></div>
	  	<el-tabs type="border-card">
			  <el-tab-pane label="加班申请">
					<div class="form">
						<el-form ref="form" :model="overtimeForm" label-width="80px">
		          <el-form-item label="加班人员">
		            <el-input v-model="overtimeForm.name"></el-input>
		          </el-form-item>
		          <el-form-item label="加班事由">
		            <el-input v-model="overtimeForm.shiyou"></el-input>
		          </el-form-item>
		          <div class="harf">
			          <div class="left">
			          	<el-form-item label="开始时间">
				            <el-date-picker
		  			          v-model="overtimeForm.startDate"
		  			          type="date"
		  			          placeholder="选择日期">
	  			        	</el-date-picker>
				          </el-form-item>
			          </div>
			          <div class="right">
			          	<el-form-item label="结束时间">
				            <el-date-picker
		  			          v-model="overtimeForm.endDate"
		  			          type="date"
		  			          placeholder="选择日期">
	  			        	</el-date-picker>
				          </el-form-item>
			          </div>
			          <div class="clear"></div>
			        </div>
		          <el-form-item label="加班时长">
		            <el-input v-model="overtimeForm.shichang"></el-input>
		          </el-form-item>
		          <el-form-item label="备注说明">
		            <el-input type="textarea" :rows="4" v-model="overtimeForm.beizhu"></el-input>
		          </el-form-item>
		          <el-form-item label="审批人">
		            <el-select></el-select>
		          </el-form-item>
		        </el-form>
		        <div class="bottom">
		        	<button class="btn btn-danger">保存</button>
		        </div>
					</div>
			  </el-tab-pane>
			  <el-tab-pane label="校车申请">
					<div class="form">
						<el-form ref="form" :model="busForm" label-width="80px">
		          <el-form-item label="用车事由">
		            <el-input v-model="busForm.shiyou"></el-input>
		          </el-form-item>
		          <div class="harf">
			          <div class="left">
			          	<el-form-item label="开始时间">
				            <el-select></el-select>
				          </el-form-item>
			          </div>
			          <div class="right">
			          	<el-form-item label="结束时间">
				            <el-select></el-select>
				          </el-form-item>
			          </div>
			          <div class="clear"></div>
			        </div>
			        <el-form-item label="目的地">
		            <el-input v-model="busForm.mudidi"></el-input>
		          </el-form-item>
		          <el-form-item label="有领导签名的文件">
		            <el-upload
		              class="upload-demo"
		              action="https://jsonplaceholder.typicode.com/posts/"
		              :auto-upload='false'
		              :on-preview="handlePreview"
		              :on-remove="handleRemove">
		              <el-button size="small">上传</el-button>
		            </el-upload>
		          </el-form-item>
		          <el-form-item label="审批人">
		            <el-select></el-select>
		          </el-form-item>
		        </el-form>
		        <div class="bottom">
		        	<button class="btn btn-danger">保存</button>
		        </div>
					</div>
			  </el-tab-pane>
			  <el-tab-pane label="教学用品">
					<div class="form">
						<el-form ref="form" :model="realiaForm" label-width="80px">
		          <el-form-item label="使用地点">
		            <el-input v-model="realiaForm.didian"></el-input>
		          </el-form-item>
		          <template v-for="item in realiaMsg">
		          	<span>{{item.title}}</span>
								<div class="harf">
									<div class="left">
										<el-form-item label="物品名称">
										  <el-input v-model="realiaForm.name"></el-input>
										</el-form-item>
									</div>
									<div class="right">
										<el-form-item label="物品数量">
										  <el-input v-model="realiaForm.num"></el-input>
										</el-form-item>
									</div>
									<div class="clear"></div>
								</div>
		          </template>
		          <div class="add" @click="realiaAdd()">
		          	<el-button>增加明细</el-button>
		          </div>
		          <el-form-item label="审批人">
		            <el-select></el-select>
		          </el-form-item>
		          <span>说明:必须以科组、级组或处室为单位申请,审批人是韩保红,重要物品转交小郑审批。</span>
		          <div class="bottom">
		          	<button class="btn btn-danger">保存</button>
		          </div>
		        </el-form>
					</div>
			  </el-tab-pane>
			  <el-tab-pane label="复印油印">
					<div class="form">
						<el-form ref="form" :model="copyForm" label-width="120px">
		          <el-form-item label="复印或油印内容">
		            <el-input type="textarea" :rows="4" v-model="copyForm.row"></el-input>
		          </el-form-item>
		          <el-form-item label="数量">
		            <el-input v-model="realiaForm.num"></el-input>
		          </el-form-item>
		          <div class="harf">
			          <div class="left">
			          	<el-form-item label="纸张类型">
				            <el-select></el-select>
				          </el-form-item>
			          </div>
			          <div class="right">
			          	<el-form-item label="单面或双面">
				            <el-select></el-select>
				          </el-form-item>
			          </div>
			          <div class="clear"></div>
			        </div>
			        <el-form-item label="审批人">
		            <el-select></el-select>
		          </el-form-item>
		          <span>说明:（1）100张内选择复印，100张以上选择油印。（2）A4、A3张用于复印或油印重要资料；16开（大小同A4）、8开（大小同A3）用于油印一般资料。（3）审批人请选择你所属年级的级长，处室申请审批人请选择主管部门领导（行政以上领导印资料审批人请选择自己，由自己审批）</span>
		          <div class="bottom">
		          	<button class="btn btn-danger">保存</button>
		          </div>
		        </el-form>
					</div>
			  </el-tab-pane>
			  <el-tab-pane label="打印纸">
					<div class="form">
						<el-form ref="form" :model="paperForm" label-width="100px">
		          <el-form-item label="打印纸用途">
		            <el-input v-model="paperForm.row"></el-input>
		          </el-form-item>
		          <el-form-item label="使用地点">
		            <el-input v-model="paperForm.didian"></el-input>
		          </el-form-item>
		          <template v-for="item in paperMsg">
		          	<span>{{item.title}}</span>
								<div class="harf">
									<div class="left">
										<el-form-item label="数量（包）">
										  <el-input v-model="realiaForm.name"></el-input>
										</el-form-item>
									</div>
									<div class="right">
										<el-form-item label="纸的颜色">
										  <el-select></el-select>
										</el-form-item>
									</div>
									<div class="clear"></div>
								</div>
		          </template>
		          <div class="add" @click="paperAdd()">
		          	<el-button>增加明细</el-button>
		          </div>
		          <el-form-item label="审批人">
		            <el-select></el-select>
		          </el-form-item>
		          <span>说明:必须以科组、级组或处室为单位申请,审批人是韩主任</span>
		          <div class="bottom">
		          	<button class="btn btn-danger">保存</button>
		          </div>
		        </el-form>
					</div>
			  </el-tab-pane>
			</el-tabs>
  	</div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      overtimeForm: {
        name: null,
        startDate: null,
        endDate: null
      },
      busForm: {},
      realiaForm: {},
      realiaMsg: [{
        title: '教学用品明细(1)'
      },
      {
        title: '教学用品明细(2)'
      }],
      copyForm: {},
      paperForm: {},
      paperMsg: [{
        title: '打印纸明细(1)'
      }]
    }
  },
  mounted () {
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    realiaAdd () {
      this.realiaMsg.push({title: '教学用品明细(' + (this.realiaMsg.length + 1) + ')'})
    },
    paperAdd () {
      this.paperMsg.push({title: '打印纸明细(' + (this.paperMsg.length + 1) + ')'})
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
.arrange{
	.pink{
    width: 104px;
    height: 64px;
    position: absolute;
    left: 3%;
    top: -20px;
    background: #E12C6C;
    border-radius: 4px;
    text-align: center;
    line-height: 70px;
    color: #fff;
  }
	.form{
		width: 90%;
		padding-left: 5%;
		padding-top: 10px;
		.bottom{
			text-align: center;
		}
		.add{
			padding-left: 45%;
		}
	}
	.harf{
		.left{
			width: 45%;
			float: left;
		}
		.right{
			width: 45%;
			float: right;
		}
		.clear{
			clear: both;
		}
	}
}
.kong{
	padding: 30px;
}
</style>
